import { inject, observer } from 'mobx-react';
import '../styles/appleBasket.scss'
import AppleItem from './AppleItem';

function AppleBasket({ store }) {
  const { ateApples, unateApples, pickApple, eatApple } = store
  return (
    <div className="app">
      <div className="appleBusket">
        <div className="title">苹果篮子</div>
        <div className="stats">
          <section className="section">
            <header className="head">当前</header>
            <div className="content">{unateApples.count}个苹果，{unateApples.totoalWeight}克</div>
          </section>
          <section className="section">
            <header className="head">已吃掉</header>
            <div className="content">{ateApples.count}个苹果，{ateApples.totoalWeight}克</div>
          </section>
        </div>
        <div className="appleList">
          {
            (unateApples.count)
              ? unateApples.items.map(({ id, weight }) => <AppleItem key={id} title={`红苹果 - ${id} 号 `} weight={weight} eatFn={() => eatApple(id)} />)
              : <div className="empty-tip">苹果篮子空空如也</div>
          }
        </div>
        <div className="btn-div"><button onClick={pickApple}>摘苹果</button></div>
      </div>
    </div>
  );
}

// export default AppleBasket
export default inject("store")(observer(AppleBasket));
